<template>
    <div class="live-masonry-view">
        <ul v-masonry transition-duration="1s" item-selector=".item" :gutter="10">
            <li v-masonry-tile class="item" v-for="(d, i) in dataArr" :key="i" v-lazy="d.thumb">
                <div class="cover-layer" :class="[d.follow === false ? 'follow' : '']"></div>
                <div class="img" v-if="d.thumb">
                    <img :src="d.thumb" />
                </div>

                <div class="text">
                    <div class="van-ellipsis" v-if="d.intro">{{ d.intro }}</div>
                    <div class="van-ellipsis" v-if="d.title">{{ d.title }}</div>
                </div>

                <div class="live-time" v-if="d.liveTime">
                    <i></i>
                    <div class="time">{{ conversionOfTime(d.liveTime) }}</div>
                </div>

                <div class="live" v-if="d.liveType == 'video' && !d.liveTitle">
                    <i></i>
                </div>

                <div class="live-audio" v-if="d.liveType == 'audio' && !d.liveTitle">
                    <i></i>
                </div>

                <div class="live-official" v-if="d.follow === false">
                    <i></i>
                    <div class="time">直播回放</div>
                </div>

                <div class="user">
                    <img :src="d.avatarUrl" />
                    <div class="van-ellipsis">{{ d.nickName }}</div>
                </div>
            </li>
        </ul>
    </div>
</template>
  
<script setup lang="ts">
import { ref } from "vue"
import { conversionOfTime_MDhm } from "@/utils/numberFormat";
import type { LiveDataType, LiveForecastsDataType, LiveOfficialDataType } from "@/typings"

let dataArr = ref<Array<LiveDataType | LiveForecastsDataType | LiveOfficialDataType>>()
const props = defineProps({
    dataArr: {
        type: Array<LiveDataType | LiveForecastsDataType | LiveOfficialDataType>
    }
})

dataArr.value = props.dataArr

const conversionOfTime = (time: number) => {
    return conversionOfTime_MDhm(time);
}
</script>
  
<style lang="scss" scoped>
.live-masonry-view {
    ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: flex-start;

        li {
            width: 45%;
            padding: 5px;
            margin: 10px 0;
            position: relative;

            .cover-layer {
                width: 94%;
                height: 94%;
                position: absolute;
                bottom: 5px;
                background-image: linear-gradient(rgba(255, 255, 255, 0.2),
                        rgba(0, 0, 0, 0.5));
                border-radius: 10px;
            }

            .follow {
                background-color: rgba(0, 0, 0, 0.5);
            }

            .img {
                width: 100%;

                img {
                    display: block;
                    width: 100%;
                    border: 1px solid #f2f2f2;
                    border-radius: 10px;
                }
            }

            .text {
                height: 32px;
                margin: 10px 0 0 0;
                color: rgb(255, 255, 255);
                display: flex;
                justify-content: space-between;
                position: absolute;
                bottom: 0;
                left: 15px;

                div {
                    width: 167px;
                    font-size: 14px;
                    font-weight: 700;
                    overflow: hidden;
                }
            }

            .live,
            .live-time,
            .live-audio,
            .live-official {
                margin: 10px 0;
                padding: 2px 7px;
                border-radius: 10px;
                background-color: rgba(0, 0, 0, 0.2);
                position: absolute;
                top: 0;
                right: 17px;
                display: flex;
                align-items: center;

                i {
                    width: 15px;
                    height: 15px;
                    display: block;
                    background-image: url("@/assets/images/home/yNL.png");
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: contain;
                }

                .time {
                    color: rgb(255, 255, 255);
                    font-size: 12px;
                    margin-left: 5px;
                }
            }

            .live-time {
                i {
                    background-image: url("@/assets/images/home/drT.png");
                }
            }

            .live-audio {
                i {
                    background-image: url("@/assets/images/home/z3W.png");
                }
            }

            .live-official {
                i {
                    width: 20px;
                    height: 20px;
                    background-image: url("@/assets/images/home/ujb.png");
                }
            }

            .user {
                display: flex;
                align-items: center;
                position: absolute;
                bottom: 40px;
                left: 15px;

                img {
                    width: 20px;
                    height: 20px;
                    border-radius: 999px;
                    margin-right: 3px;
                }

                div {
                    width: 100px;
                    font-size: 12px;
                    color: #ffffff;
                }
            }
        }
    }
}
</style>